<template>
    <div id="Statistical_Into">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/novel_channelList' }">频道列表</el-breadcrumb-item>
            <el-breadcrumb-item>
                <el-link :underline="false" @click="getBack">栏目列表</el-link>
            </el-breadcrumb-item>
            <el-breadcrumb-item>小说列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <el-form ref="form" :model="searchForm" label-width="80px" :inline="true" size="small">
                <el-form-item label="">
                    <el-form-item label="">
                        <el-input v-model="searchForm.title" placeholder="请输入小说名称"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input v-model="searchForm.author" placeholder="请输入作者名称"></el-input>
                    </el-form-item>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="search">查询</el-button>
                    <el-button type="primary" size="small" @click="addRecharge">添加小说</el-button>
                </el-form-item>
            </el-form>
            <el-table
                    size="small"
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="coverpic"
                        label="封面"
                        width="122">
                    <template slot-scope="scope">
                        <img :src="scope.row.coverpic" width="30" height="30" alt="">
                    </template>
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="书名">
                </el-table-column>
                <el-table-column
                        prop="author"
                        label="作者">
                </el-table-column>
                <el-table-column
                        prop="allchapter"
                        label="总章节">
                </el-table-column>
                <el-table-column
                        prop="iswz"
                        label="进度">
                    <template slot-scope="scope">
                        <span v-if="scope.row.iswz==1">连载</span>
                        <span v-if="scope.row.iswz==2">完结</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="属性">
                    <template slot-scope="scope">
                        <span v-if="scope.row.isbg==1">小图</span>
                        <span v-if="scope.row.isbg==2">大图</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="长篇/短篇">
                    <template slot-scope="scope">
                        <span v-if="scope.row.islong==1">长篇</span>
                        <span v-if="scope.row.islong==2">短篇</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="男频/女频">
                    <template slot-scope="scope">
                        <span v-if="scope.row.issex==1">男频</span>
                        <span v-if="scope.row.issex==2">女频</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="上下架">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status==1">上架</span>
                        <span v-if="scope.row.status==0">下架</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="是否显示">
                    <template slot-scope="scope">
                        <span v-if="scope.row.ishow==1">显示</span>
                        <span v-if="scope.row.ishow==0">不显示</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="操作"
                        width="300">
                    <template slot-scope="scope">
                        <p style="text-align: center">
                            <el-button type="primary" plain size="small" @click="edit(scope.row)">修改排序</el-button>
                            <el-button type="warning" plain size="small" @click="remove(scope.row.id)">删除</el-button>
                        </p>
                    </template>
                </el-table-column>
            </el-table>
            <div class="el-pagination">
                <el-pagination
                        background
                        @size-change="changeSize"
                        @current-change="changeCurrent"
                        :current-page="params.pagenum"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="params.pagesize"
                        :total="params.totals"
                        layout="total, sizes, prev, pager, next, jumper">
                </el-pagination>
            </div>
        </el-card>
        <!--            新增或编辑-->
        <el-dialog title="新增" width="50%" :visible.sync="visible">
            <el-row :gutter="20">
                <el-col :span="15">
                    <el-form ref="form" label-width="150px" size="small">
                        <el-form-item label="推荐小说">
                            <el-autocomplete
                                    class="inline-input"
                                    style="width: 100%"
                                    v-model="form.name"
                                    :fetch-suggestions="querySearch"
                                    placeholder="请输入小说名"
                                    @select="handleSelect"
                            ></el-autocomplete>
                        </el-form-item>
                        <el-form-item label="排序">
                            <el-input v-model="form.list_order"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="dialogAffirm" size="small">确 定</el-button></span>
        </el-dialog>
        <el-dialog title="修改" width="50%" :visible.sync="editvisible">
            <el-row :gutter="20">
                <el-col :span="15">
                    <el-form ref="form" label-width="150px" size="small">
                        <el-form-item label="排序">
                            <el-input v-model="list_order"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editvisible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="dialogEdit" size="small">确 定</el-button></span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "Statistical_Into",
        data() {
            return {
                params: {
                    pagenum: 1,
                    pagesize: 10,
                    totals: 0,
                },
                form: {
                    anid: '',
                    name: '',
                    list_order: '',
                },
                tableData: [],
                fromTitle: '',
                visible: false,
                editvisible: false,
                column_id: '',
                list_order: '',
                id: '',
                searchForm: {
                    title: '',
                    author: '',
                }
            }
        },
        created() {
            this.column_id = this.$route.query.column_id;
            this.getList();
            this.loadAll();
        },
        methods: {
            getBack() {
                this.$router.go(-1);
            },
            getList() {
                let data = {
                    page: this.params.pagenum,
                    page_size: this.params.pagesize,
                    column_id: this.column_id,
                    title: this.searchForm.title,
                    author: this.searchForm.author,
                };
                this.$axios.post("admin/column_anime/index", data).then((res) => {
                    this.params.totals = res.data.count;
                    this.tableData = res.data.list;
                });
            },
            // 每页显示多少条
            changeSize(val) {
                this.params.pagesize = val;
                this.getList();
            },
            // 当前显示的页数
            changeCurrent(val) {
                this.params.pagenum = val;
                this.getList();
            },
            addRecharge() {
                this.form = {
                    anid: '',
                    name: '',
                    list_order: '',
                };
                this.visible = true;
            },
            edit(row) {
                this.id = row.id;
                this.list_order = row.list_order;
                this.editvisible = true;
            },
            //编辑
            dialogEdit() {
                this.$axios.put("admin/column_anime/" + this.id, {list_order: this.list_order}).then((res) => {
                    this.$message.success('成功');
                    this.editvisible = false;
                    this.getList();
                });
            },
            remove(id) {
                this.$confirm('确定要进行操作, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.del('admin/column_anime/' + id, '').then((res) => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getList();
                    });
                }).catch(() => {

                });
            },
            //添加
            dialogAffirm() {
                let data = {
                    column_id: this.column_id,
                    anid: this.form.anid,
                    list_order: this.list_order,
                };
                this.$axios.post("admin/column_anime", data).then((res) => {
                    this.$message.success('成功');
                    this.getList();
                    this.visible = false;
                });
            },
            querySearch(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            handleSelect(item) {
                console.log(item);
                this.form.anid = item.id;
            },
            loadAll() {
                this.$axios.post("admin/novel/getAll", '').then((res) => {
                    this.restaurants = res.data;
                    this.restaurants.map((num) => {
                        num.value = num.title;
                    })
                });
            },
            search() {
                this.params.pagenum = 1;
                this.getList();
            }
        }
    }
</script>

<style scoped>

</style>